<template>
  <div class="container">
    <van-tabs type="card" v-model="activeName">
      <van-tab :title="'全部' + ratingList.length" :name="0"></van-tab>
      <van-tab :title="'满意' + satisfiedList.length" :name="1"></van-tab>
      <van-tab :title="'不满意' + dissatisfiedList.length" :name="2"></van-tab>
    </van-tabs>
    <!-- <div class="rating-box" v-for="(item, index) in List" :key="index">
      <van-image round width="10rem" height="10rem" :src="item.avatar" />
      <h2>{{ item.username }}</h2>
      <van-rate v-model="item.score" readonly />
    </div> -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <template v-for="(item, index) in List">
          <!-- 通过变量控制每一页展示条数 及页数  下拉式刷新  到底是加载 达到分页目的 -->
          <div
            class="rating-box"
            :key="index"
            v-if="index <= currentPage * pagSize - 1"
          >
            <van-image round width="10rem" height="10rem" :src="item.avatar" />
            <h2>{{ item.username }}</h2>
            <van-rate v-model="item.score" readonly />
          </div>
        </template>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
interface IRating {
  avatar: string;
  deliveryTime: number;
  rateTime: number;
  rateType: number;
  recommend: Array<string>;
  score: number;
  text: string;
  username: string;
}

@Component
export default class extends Vue {
  /***********数据************/
  //  评价列表
  ratingList: Array<IRating> = [];
  satisfiedList: Array<IRating> = []; //满意
  dissatisfiedList: Array<IRating> = []; //不满意
  activeName: number = 0; //控制切换
  // 下拉 刷新列表
  refreshing: boolean = false; // 是否处于下拉刷新
  loading: boolean = false; // 列表的加载状态
  finished: boolean = false; // 是否加载完毕

  pagSize: number = 6;
  currentPage: number = 1;
  //    获取评价列表
  async created(): Promise<void> {
    let res = await this.$api.getEnterpirseEvaluate();
    let { data } = res.data;
    this.ratingList = data;
    // 对数据进行判断筛选  将满意不满意分成两个单独数组
    this.ratingList.forEach((item) => {
      if (item.score > 3) {
        this.satisfiedList.push(item);
      } else {
        this.dissatisfiedList.push(item);
      }
    });
  }

  //   通过计算属性 得到List的不通 activeName状态值
  // 计算要渲染的列表
  get List(): Array<IRating> {
    switch (this.activeName) {
      case 0:
        return this.ratingList;
      case 1:
        return this.satisfiedList;
      case 2:
        return this.dissatisfiedList;
      default:
        return this.ratingList;
    }
  }

  //   下拉刷新onRefresh
  onRefresh(): void {
    console.log("下拉刷新了");

    //更新数据后 将currentPage  设置为1
    this.currentPage = 1;
    // 并将this.finished 设置为false
    this.finished = false;

    //   下拉刷新时会触发 refresh 事件，在事件的回调函数中可以进行同步或异步操作
    // 操作完成后将 v-model 设置为 false，表示加载完成。
    this.refreshing = false;
  }

  // 列表加载事件 onLoad
  onLoad(): void {
    console.log("加载了");
    //   到底时触发  并将 loading改为true
    // 模拟请求第二页的数据 加载下一页的数据
    this.currentPage++;

    //   判断是否加载完了  地主家没余粮了就将 this.finished 设置为  true  到下拉刷新时记得改为 false

    if (this.currentPage >= 5) {
      this.finished = true;
    }
    //   改完数据后  将loading改回false
    this.loading = false;
  }
}
</script>

<style scoped lang="scss">
.container {
  height: calc(100vh - 43px);
  overflow: scroll;
}
.van-list{
    padding-bottom: 80px;
}

// sass的穿透
::v-deep .van-tabs__content {
  height: 100%;
  overflow: scroll;
}
</style>